{include file="common/head"}
<link rel="stylesheet" href="__css__/index/article/index.css">
<link rel="stylesheet" href="__css__/index/article/comment.css">
<link rel="stylesheet" href="/static/wangeditor/view.css">
<link rel="stylesheet" href="/static/wangeditor/style.css">
<script>
    document.title = "{$data.title}"
</script>
<style>
    .rusld {
        width: 90px;
        height: 118px;
        background: url(__IMG__/other/rwd.gif) no-repeat 0 0;
        text-align: center;
        color: #F30;
        position: relative;
        margin: 0 auto;
    }

    .rusld cite {
        display: block;
        margin-bottom: -6px;
        height: 30px;
        font-size: 20px;
        top: 42px;
        position: absolute;
        width: 90px;
    }

    .span {
        height: 20px;
        line-height: 20px;
        padding: 0 5px;
        background-color: #999;
        color: #fff;
        font-size: 12px;
        border-radius: 0;
    }

    .is_top {
        background: #1E2328;
    }

    .is_hot {
        background: #DC0811;
    }

    .is_ques {
        background: rgb(237, 211, 94);
    }

    .intro-img {
        width: 100%;
        height: auto;
    }

    .answer {
        margin: 2em 0 2em -20px;
        padding: 5px 45px 5px 20px;
        padding-top: 5px;
        padding-right: 45px;
        padding-bottom: 5px;
        padding-left: 20px;
        width: 240px;
        background: #FFF4DD url(__IMG__/other/arw.gif) no-repeat 100% 50%;
        color: #F26C4F;
        font-size: 14px;
    }

    .anw .avator {
        width: 30px !important;
        height: 30px !important;
    }

    .art-header .user-info .avator {
        width: 40px;
        height: 40px;
        border-radius: 5px;
        float: left;
        margin-right: 10px;
    }

    .user-info p {
        float: left;
    }

    .info-navbar .user-info {
        float: left;
    }

    .info-navbar .concentrate {
        float: right;
    }
</style>
<div class="layout clearfix">
    <span class="layui-breadcrumb">
        <a href="{:url('/index/index/index')}">首页</a>
        <a><cite>文章详细</cite></a>
    </span>
    <p class="s-text">文章详细</p>
    <div class="banner">
        <div class="main-content">
            {if $data.status == 0}
            <div class="unchecked">
                待审核
            </div>
            {/if}
            <div class="art-header">
                <h2 class="title">
                    {$data.is_top == 1 ? '<span class="span is_top">置顶</span>' : ''}
                    {$data.is_hot == 1 ? '<span class="span is_hot">加精</span>' : ''}
                    {$data.type == 3 ? '<span class="span is_ques">提问</span>' : ''}
                    {$data.title}
                </h2>
                <div class="layui-clear info-navbar">
                    <div class="user-info ">
                        <img src="{$data.profile.head_icon}" alt="{$data.profile.username}" class="avator">
                        <p>
                            <a class="layui-font-blue layui-font-14" style="margin-top: 10px;display: inline-block;"
                                href="{:url('/index/profile/index' , ['uid' => $data.profile.id])}">{$data.profile.nickname}</a>
                            <br />
                        </p>
                    </div>
                    <div class="concentrate">
                        <button class="layui-btn layui-btn-sm {$data.isFollow == false ? 'layui-btn-primary layui-border-blue' : 'layui-bg-blue'}"
                            onclick="follow(this, '{$data.profile.id}')" id="follow">{$data.isFollow == false ? '+ 关注' : '+ 已关注'}</button>
                    </div>
                </div>
                <p style="margin-top: 20px;font-size: 10px;
                line-height: 20px;
                color: #4b5b76;">
                    发表时间：{$data.create_time} <br>
                    {$data.update_time ? '最后由 <a class="layui-font-1 layui-font-blue"
                        href=/index/profile/index.html?uid='.$data.update_uid.'>'.$data.update_name.'</a>于' .
                    $data.update_time . '编辑' : ''}
                </p>
            </div>
            <hr />
            <div id="content-html">
                {if $data.type == 3}
                {if $data.isAdopt}
                <div class="rusld" style="background-position: 0 -118px;color: #999;">
                    <cite>{$data.score}积分</cite>
                </div>
                {else/}
                <div class="rusld">
                    <cite>{$data.score}积分</cite>
                </div>
                {/if}
                {/if}
                {if $data.img_path}
                <img class="intro-img" src="{$data.img_path}" alt="文章介绍图">
                {/if}
                {$data.content|raw}
                {if $data.type == 3 && $data.isAdopt}
                <h3 class="answer">最佳答案</h3>
                <div class="anw">
                    <img src="{$data.answer.head_icon}" class="avator" alt="">
                    <a class="layui-font-blue"
                        href="{:url('/index/profile/index',['uid' => $data.answer.id])}">{$data.answer.nickname}</a>
                    <br>
                    {$data.answer_comment}
                </div>
                {/if}

            </div>
            <div class="tag-box">
                {volist name="$data.tagList" id="tag" key="id"}
                <a href="{:url('index/index/index',['tag' => $tag.id])}" class="tag">{$tag.name}</a>
                {/volist}
            </div>
        </div>
        <!-- 收藏 | 分享 -->
        <div class="operate layui-clear">
            <!-- 文章状态为正常开启 -->
            {if $data.status == 1}
            <button type="button" onclick="collect()" id="collect"
                class="layui-btn layui-btn-sm {$data['isCollect'] == 1 ? 'layui-bg-orange' : 'layui-bg-blue'}">
                <i class="layui-icon layui-icon-star"></i>
                {$data['isCollect'] == 1 ? '取消收藏' : '收藏'}
            </button>
            {/if}
            <button type="button" class="layui-btn layui-btn-sm" onclick="share()">分享文章</button>
        </div>
        <!-- 评论 -->
        <div class="comment-container">
            <p class="add-comment" id="add-cmt-text">添加评论</p>
            <div class="comment-input" id="comment-input">
                <textarea class="layui-textarea" name="commentVal" id="commentVal" data-pid="0" data-ctn="0"
                    placeholder="请友好发言哦！"></textarea>
                <button type="button" class="layui-btn layui-bg-blue" id="sub-comment"
                    onclick="addComment()">立即评论</button>
                <button class="layui-btn layui-btn-primary layui-border" id="noResponse"
                    onclick="noResponse(this)">取消回复</button>
            </div>
            <p class="add-comment">总评论（{$list.totalNum}）</p>
            <ul class="comment-list">
                {if count($list.list) == 0}
                <p class="no-data">还没有评论哦!快来抢沙发</p>
                {/if}
                {volist name="list.list" id="item" key="key"}
                <li>
                    <div class="head-box">
                        <div class="clearfix">
                            {if $item.userInfo neq null}
                            <img src="{$item.userInfo.head_icon}" class="head-icon">
                            {/if}
                            <p class="info">
                                <span><a class="layui-font-green layui-font-14"
                                        href="{:url('/index/profile/index' , ['uid' => $item.userInfo.id])}">{$data.user_id
                                        == $item.userInfo.id ? '楼主' : $item.userInfo.nickname}</a></span>
                                        {if $item.role}
                                        <span class="layui-badge layui-bg-blue" style="font-size: 10px;">{$item.role}</span>
                                        <br>
                                        {/if}
                                        <br>
                                        
                                <span class="layui-font-gray layui-font-12">{$item.create_time}</span>
                                <span class="layui-font-black  layui-font-12">#{$key}</span>
                            </p>
                        </div>

                    </div>
                    <div class="comment  {$item.type == 3 ? 'reward' : ''}">
                        {if $item.response}
                        <p class="response-comment">
                            <span class="layui-font-black layui-font-12">{/* $item.userInfo.id ==
                                $Request.session.user.user_id ? '我' : $item.userInfo.nickname */}<a
                                    href="{:url('/index/profile/index' , ['uid' => $item.response_id])}"
                                    class="layui-font-blue layui-font-12">{$data.user_id == $item.response_id ? '楼主' :
                                    $item.response_username}</a> ： 
                                {$item.response}</span>
                        </p>
                        {/if}
                        {$item.comment}
                    </div>
                    <div class="action" data-id="{$item.id}">
                        <span onclick="response(this)"><a class="layui-font-blue layui-font-12"
                                href="javascript:">回复</a></span>
                        {if $data.type == 3 && $item.user_id != $Request.session.user.user_id && $data.isAdopt == 0
                        &&
                        $Request.session.user.user_id == $data.user_id}
                        <span onclick="adopt('{$item.id}')"><a class="layui-font-orange layui-font-12"
                                href="javascript:">采纳</a></span><br>
                        {/if}
                        {if $Request.session.user.user_id == $item.user_id || $data.user_id ==
                        $Request.session.user.user_id || $Request.session.user.role == 'all'}
                        <span onclick="delComment(this ,'{$item.id}')"><a class="layui-font-gray layui-font-12"
                                href="javascript:">删除</a></span><br>
                        {/if}

                    </div>
                </li>
                {/volist}

            </ul>
            <div class="pagination">
                {$page|raw}
            </div>

        </div>
    </div>

</div>
{include file='common/bottom'}
<script>
    layui.use(function () {
        var layer = layui.layer
        $ = layui.$
        layui.code({
            elem: '.code'
        });

        $('#content-html img').click(function () {
            let src = $(this).prop('src')
            let alt = $(this).prop('alt')
            imgObj = $('#content-html img')
            data = []
            let index = ''
            for (i = 0; i < imgObj.length; i++) {
                data[i] = {
                    "alt": '图片' + i,
                    "pid": i,
                    "src": imgObj[i].src,
                }
                if (data[i]['src'] == src)
                    index = i
            }


            layer.photos({
                photos: {
                    "title": "{$data.title}",
                    "start": index,
                    "data": data
                }
            });
        })
    });

</script>
<script>
    // 关注
    function follow(th, id) {
        let url = ""
        let uid = id
        if ("{$base.isLog}") {
            $.get('/index/profile/doFollow', { uid: uid }, (res) => {
                if (res.code == 200) {
                    layer.msg(res.message, { icon: 6 })
                    var str = $('#follow')[0].innerText
                    if (str.trim() == '+ 关注') {
                        $('#follow')[0].innerHTML = `已关注`
                        $('#follow').toggleClass('layui-bg-blue')
                        $('#follow').toggleClass('layui-btn-primary')
                        $('#follow').toggleClass('layui-border-blue')
                    } else {
                        $('#follow')[0].innerHTML = `+ 关注`
                        $('#follow').removeClass('layui-bg-blue')
                        $('#follow').toggleClass('layui-btn-primary')
                        $('#follow').toggleClass('layui-border-blue')
                    }

                } else {
                    layer.msg(res.message, { icon: 5 })
                }
            }
                , 'json')
        }
        else {
            layer.confirm('请先登录再来操作哦！', () => {
                window.location.href = "{:url('/index/login/index')}"
            })
        }
    }
    function addComment() {
        let pid = $('#commentVal').data('pid')
        let data = {
            'id': "{$Request.get.art_id}",
            'comment': $('#commentVal').val()
            , 'pid': pid
        }
        if ("{$base.isLog}") {
            $.post('/index/comment/send', data, (res) => {
                if (res.code == 200) {
                    layer.msg('发送成功', { icon: 6 })
                    $('#commentVal')[0].value = ''
                    setTimeout(() => {
                        window.location.reload()
                    }, 2000)
                } else {
                    layer.msg(res.message, { icon: 5 })
                }
            }, 'json')
        }
        else {
            layer.confirm('请先登录再来操作哦！', () => {
                window.location.href = "{:url('/index/login/index')}"
            })
        }
    }
    // 支付文章
    function payArt(id) {
        if ("{$base.isLog}") {
            $.get('/index/article/pay/art_id/{$Request.get.art_id}', (res) => {
                if (res.code == 200) {
                    layer.msg('支付成功', { icon: 6 })
                    setTimeout(() => {
                        window.location.reload()
                    }, 2000)
                } else {
                    layer.msg(res.message, { icon: 5 })
                }
            }, 'json')
        }
        else {
            layer.confirm('请先登录再来操作哦！', () => {
                window.location.href = "{:url('/index/login/index')}"
            })
        }

    }
    // 回答采纳
    function adopt(id) {
        layer.confirm('确定要采纳此答案吗?（此操作不可逆）<br>只能采纳一次哦！请注意仔细确认后再操作！', {
            title: '温馨提示'
            , btn: ['我已知晓', '取消']
        }
            , function () {
                $.get('/index/article/adopt/art_id/{$Request.get.art_id}', { cid: id }, (res) => {
                    if (res.code == 200) {
                        layer.msg('操作成功', { icon: 6 })
                        setTimeout(() => {
                            window.location.reload()
                        }, 2000)
                    } else {
                        layer.msg(res.message, { icon: 5 })
                    }
                }, 'json')
            }, function () {

            }

        )
    }
    // 收藏
    function collect() {
        let url = ""
        if ($('#collect').hasClass('layui-bg-blue')) {
            url = "/index/collect/doCollect/art_id/{$Request.get.art_id}"
        } else {
            url = "/index/collect/unCollect/art_id/{$Request.get.art_id}"
        }
        if ("{$base.isLog}") {
            $.get(url, (res) => {
                if (res.code == 200) {
                    layer.msg('操作成功', { icon: 6 })
                    var str = $('#collect')[0].innerText
                    if (str.trim() == '收藏') {
                        $('#collect')[0].innerHTML = `<i class="layui-icon layui-icon-star"></i>取消收藏`
                    } else {
                        $('#collect')[0].innerHTML = `<i class="layui-icon layui-icon-star"></i>收藏`
                    }
                    $('#collect').toggleClass('layui-bg-orange')
                    $('#collect').toggleClass('layui-bg-blue')
                } else {
                    layer.msg(res.message, { icon: 5 })
                }
            }
                , 'json')
        }
        else {
            layer.confirm('请先登录再来操作哦！', () => {
                window.location.href = "{:url('/index/login/index')}"
            })
        }
    }

    function response(it) {
        let input_box = $('#comment-input')
        let cmt_html = input_box.prop('outerHTML')
        input_box.remove()
        let data_li = $(it).parents()[1]
        $(data_li).after(cmt_html)
        pid = $($(it).parent()[0]).data('id')
        $('#commentVal').data('pid', pid)
        $('#noResponse')[0].style.display = 'inline-block'
        $('#commentVal').focus()
    }
    // 取消回复
    function noResponse(it) {
        $('#noResponse')[0].style.display = 'none'
        $('#commentVal')[0].dataset.pid = 0
        let cmt_html = $('#comment-input').prop('outerHTML')
        $('#add-cmt-text').after(cmt_html)
        $($(it).parent()).remove()
    }
    // 删除评论
    function delComment(it, id) {
        let com = $($(it).parents()[1])
        $.ajax({
            url: `/index/comment/del/id/${id}`
            , dataType: 'json'
            , success: (res) => {
                if (res.code == 200) {
                    layer.msg('删除成功', { icon: 6 })
                    com.remove()
                }
                else {
                    layer.msg(res.message, { icon: 5 })
                }
            }
        })
    }

    // 分享文章
    function share() {
        const baseUrl = 'https://service.weibo.com/share/share.php?';
        let uri = window.location.href
        let pic = "{$data.img_path}"
        let description = "{$data.content|substr=0,25}"
        const queryParams = [
            `title={$data.title}`,
            `url=${encodeURIComponent(uri)}`,
            `pic=${encodeURIComponent(pic)}`,
            // `ralateUid=`, // 关联用户ID（可选）  
            // `searchPic=true`, // 是否搜索图片（可选）  
            `description=${encodeURIComponent(description)}` // 描述（可选）  
        ].join('&');
        // 返回完整的分享链接  
        let href = `${baseUrl}${queryParams}`;
        window.open(href, '_blank')
    }
    function getImgNaturalDimensions(oImg, callback) {
        var nWidth, nHeight;
        if (!oImg.naturalWidth) { // 现代浏览器

            nWidth = oImg.naturalWidth;
            nHeight = oImg.naturalHeight;
            callback({ w: nWidth, h: nHeight });

        } else { // IE6/7/8
            var nImg = new Image();

            nImg.onload = function () {
                var nWidth = nImg.width,
                    nHeight = nImg.height;
                callback({ w: nWidth, h: nHeight });
            }
            nImg.src = oImg.src;
        }
    }
    var img = $('#content-html img')[0]
    getImgNaturalDimensions(img, function (dimensions) {
        console.log(dimensions.w);
    });
</script>